<template>
	<div class="homeRoot">
		<xxl-status></xxl-status>
		<div class="ctx" :style="{ height: 'calc( 100% - (' + header.top + 'px + 60px))' }">
			<index v-show="home == 0" :inme="home == 0"></index>
			<shop v-show="home == 1" :inme="home == 1"></shop>
			<order v-show="home == 2" :inme="home == 2"></order>
			<me v-show="home == 3" :inme="home == 3"></me>
		</div>
		<tabBar @checkTab="checkTab" :i="home" class="foot"></TabBar>
	</div>
</template>

<script>
import index from "../index/index"
import me from "../me/me"
import order from "../order/order"
import shop from "../shop/shop"
import { mapState } from "vuex"
export default {
	name: 'Home',

	data() {
		return {

		};
	},
	mounted() {
		console.log("home" + this.home);
		
		uni.setNavigationBarColor({
			frontColor: "#000000"
		})
	},
	computed: {
		...mapState(['home'])
	},
	updated() {
		console.log("home更新");
	},
	methods: {
		checkTab(i) {
			if (this.user.isLogin) {
				this.$store.state.home = i
			}
			else if ( i == 2) {
				uni.navigateTo({
					"url": "/pack_log/login/login",
				})
			}
			else{
				this.$store.state.home = i
			}
		}
	},

	components: {
		index,
		me,
		shop,
		order
	}
}
</script>

<style lang="scss" scoped>
.homeRoot {
	height: 100vh;
	max-height: 100vh;
}

.header {
	background: $uni-color-primary;
}

.ctx {
	// height: ;
}

.foot {
	height: 60px;
}
</style>